<template>
	<!-- 意见反馈 wwl -->
	<page  ref='page'>
		<view class="page">
			<!-- 我的订单 wwl-->
				<!-- <view class="tab_row">
					<tabRow :list='tabList' @change='changeTab' ref='tabRow' />
				</view> -->
				<!-- <view class="list_info"> -->
				<!-- <swiper class="tab_data_box" :current='tabIndex' :duration="300" @change="onswiperchange"> -->
					<!-- <swiper-item class="tab_data_row" v-for="(item, index) in tabList" :key="index"> -->
						<scroll-view style='height:100%'  enableBackToTop="true" scroll-y="true" @scrolltolower="loadMore" v-if="riqilist && riqilist.length > 0">
						<view class="list" >
							<view class="riqi" v-for='(ri,k) in riqilist' :key='k' >
								<view class="top1">
									<text>{{ri}}</text>
								</view>
								<view class="info_row" v-for='(row,i) in list' :key='i' v-if="ri == row.riqi" @click="onDetails(row)">
									
									<view class="commodity_box">
										<view class="left">
											<image :src="row.cover" mode="scaleToFill" v-if="row.cover != 0"></image>
											<image src="../static/image/img/default.png" mode="scaleToFill" class="img" v-else></image>
										</view>
										<view class="right">
											<view class="right1">
												<view class="left">
													<image :src="row.shopavatar" mode="scaleToFill" class="img" v-if="row.shopavatar != ''"></image>
													<image src="https://xiaoqu.wuguoxin.vip/uploads/web/shop.png" mode="scaleToFill" class="img" v-else></image>
													<text>{{row.shopping_name}}</text>
													<view class="biaoqian">{{row.shopping_type == 1 ? '工匠' : row.shopping_type == 2 ? '设计师' : row.shopping_type == 3 ? '建材城' : row.shopping_type == 4 ? '厂商' : row.shopping_type == 5 ? '建材城' : row.shopping_type == 6 ? '兑换商城' : '商城商品'}}</view>
												</view>
											</view>
											
											<view class="right2">
												<view class="name">
													{{row.name}}
												</view>
											</view>
											<!-- <view class="right_right">
												<view class="money">
													¥ {{row.amount_one}}
												</view>
												<view class="num">
													x {{row.count}}
												</view>
											</view> -->
											<view class="right4">
												<text class="shijian">{{row.times}}</text>
												<text class="chakan">查看详情<n-icon name="right" size="30" color="#000" class="youjiantou1"></n-icon></text>
											</view>
										</view>
										
									</view>
									
								</view>
							</view>
						</view>
					</scroll-view>
					<empty  text="暂无浏览历史" v-else/>
					<!-- </swiper-item> -->
				<!-- </swiper> -->
			<!-- </view> -->
			
			
		</view>
	</page>
</template>

<script>
	import uPopup from '@/components/u-popup.vue'
	import {
		getUserInfo
	} from '@/utils/getRequest.js'
	import {
		getOrderList,setConfirmReceipt,setAddCart,setOrderPay,orderCloseOrder,get_goods_browse_record
	} from "./static/api.js"
	import tabRow from '@/components/tab-row.vue'
	import {mapState} from 'vuex'
	export default {
		components: {
			tabRow,uPopup
		},
		data() {
			return {
				payObj:{
					visible:false,
				},
				// '1已提交 2已关闭 3 待发货 4 待收货 5待评价 6完成'
				tabList:[{
						id: 0,
						name: "全部"
					},
					{
						id: 1,
						name: "待支付",
						text:'待支付'
					},
					{
						id: 3,
						name: "待发货",
						text:'待发货'
					},
					{
						id: 4,
						name: "待验收",
						text:'卖家已发货'
					},
					{
						id:5,
						name: "待评论",
						text:'买家已签收'
					}
				],
				statusList: [{
						id: 0,
						name: "全部"
					},
					{
						id: 1,
						name: "待支付",
						text:'待支付',
					},
					{
						id: 2,
						name: "已关闭",
						text:'已关闭'
					},
					{
						id: 3,
						name: "待发货",
						text:'待发货'
					},
					{
						id: 4,
						name: "待验收",
						text:'卖家已发货'
					},
					{
						id:5,
						name: "待评论",
						text:'买家已签收'
					},
					{
						id:6,
						name: "已完成",
						text:'已完成'
					}
				],
				tabIndex:0,
				tabActive: 0,
				list: [],
				riqilist: [],
				page: 1,
				size: 10,
				total: 0,
				loading:false,
				operationLoading:false,
				operationId:null,
				operationType:null,
			}
		},
		onShow() {
			if (this.$global.$editUploadBack(3, 'orderIndex')) {
				this.total = 0
				this.page = 1
				this.getList()
			}
		},
		computed: {
			...mapState(['duanType'])
		},
		// onReady(){
		// 	if(this.$refs.tabRow.active  != this.tabActive) this.$refs.tabRow.active  = this.tabActive
		// },
		onLoad(params) {
			// if(params.status){
			// 	this.tabActive = Number(params.status)
			// 	this.tabIndex = this.tabList.findIndex(x=>x.id == this.tabActive)
			// }
			this.$global.$editUploadBack(2, 'orderIndex');
			this.getList()
		},
		onPullDownRefresh(){
			// if(this.tabActive == 1){
			// 	this.total = 0
			// 	this.page = 1
			// 	this.getList()
			// }
		},
		methods: {
			// 取消订单
			async cancellationOrder(id,i){
				try{
					var res = await orderCloseOrder({id});
					console.log(res,'取消支付');
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
					// this.$set(this.list[i],'status',1)
					this.getList();
				}catch{
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
				}
			},
			async onPay(type,id){
				// console.log(this.operationLoading)
				if(type){
					this.operationLoading = true
					try{
						var result1 = await setOrderPay({pay_type:type,duan_type:1,id:this.operationId,debug:0})
						console.log(result1,'result1')
						uni.requestPayment({
							provider:type == 1 ? 'alipay' : 'wxpay',
							orderInfo:result1,
							success: e => {
								uni.showToast({title:'支付成功'})
								setTimeout(()=>{
									this.total = 0
									this.page = 1
									this.getList()
								},300)
							},
							fail: e => {
								console.log(JSON.stringify(e),'fail')
								uni.showToast({title:'支付失败',icon:'none'})
							},
							complete: () => {
								this.payObj.visible = false
								this.operationLoading = false
								this.operationType = null
								this.operationId = null
							}
						});
					}catch{
						this.payObj.visible = false
						this.operationLoading = false
						this.operationType = null
						this.operationId = null
					}
					
				}else{
					this.operationId = id
					this.operationType = 'pay'
					if(this.duanType == 1){
						this.payObj.visible = true
					}else{
						try{
							var result = await setOrderPay({pay_type:4,duan_type:2,id:this.operationId,debug:0})
							uni.requestPayment({
								'provider': 'wxpay',
								 ...result,
								success:  (res1) =>{
								  uni.showToast({
									title:'支付成功'
								  })
								setTimeout(()=>{
									this.total = 0
									this.page = 1
									this.getList()
								},300)
								},
								complete: () => {
									this.operationLoading = false
									this.operationType = null
									this.operationId = null
								},
								fail: function (err) {
								 uni.showToast({
									title:'支付失败',icon:'none'
								 })
								}
							});
						}catch{
							this.operationLoading = false
							this.operationType = null
							this.operationId = null
						}
						
					}
				}
			},
			async onAddCart(row){
				if(this.operationLoading) return
				this.operationLoading = true
				this.operationType = 'addCart'
				this.operationId = row.id
				// uni.showToast({title:'暂无接口',icon:'none'})
				try{
					var res = await setAddCart({id:row.id})
					uni.showToast({title:'添加成功',icon:'none'})
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
				}catch{
					this.operationLoading = false
					this.operationType = null
					this.operationId = null
				}
			},
			onConfirmReceipt(row,i){
				if(this.operationLoading) return
				uni.showModal({
					title: '提示',
					content: `您确认收货当前商品吗？`,
					success:async (res)=>{
					  if (res.confirm) {
						   this.operationLoading = true
						   this.operationType = 'confirmReceipt'
						   this.operationId = row.id
						  try{
							var res1  = await setConfirmReceipt({id:row.id})
							this.operationLoading = false
							this.operationType = null
							this.operationId = null
							this.$set(this.list[i],'status',5)
						  }catch{
							  this.operationLoading = false
							  this.operationType = null
							  this.operationId = null
						  }
					  }
					}
				})
			},
			onDetails(row) {
				if(row.shopping_type == 1){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=findCraftsman'
					})
				}else if(row.shopping_type == 2){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=findDesign'
					})
				}else if(row.shopping_type == 3){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=buildingMaterialsCity'
					})
				}else if(row.shopping_type == 4){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=buildingMaterialsCity'
					})
				}else if(row.shopping_type == 5){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=buildingMaterialsCity'
					})
				}else if(row.shopping_type == 6){
					uni.navigateTo({
						url: '/pagesCommodity/information?id=' + row.goods_id + '&type=buildingMaterialsCity' + '&duihuan=1'
					})
				}else{
					
				}
				
			},
			onComment(row) {
				uni.navigateTo({
					url: '/pagesMy/order/evaluate?id=' + row.id + '&type=' + row.type + '&goods_id=' + row.goods_id
				})
			},
			orderTracking(row) {
				uni.navigateTo({
					url: '/pagesMy/order/orderTracking?id=' + row.id
				})
			},
			onswiperchange(e) {
				if(this.loading) return 
				let index = e.target.current || e.detail.current
				this.switchTab(this.tabList[index].id)
			},
			switchTab(x){
				var index = this.tabList.findIndex(c=>c.id == x)
				// if(index == this.tabIndex) return 
				// this.tabIndex = index
				// this.tabActive = x
				// this.$refs.tabRow.active = x
				this.page = 1
				this.total = 0
				this.list = []
				this.getList()
			},
			changeTab(x) {
				// this.tabActive = x
				// this.switchTab(x)
			},
			async getList() {
				if(this.page == 1) uni.showLoading({mask:true})
				this.loading = true
				try{
					var res = await get_goods_browse_record({type:1,limit:this.size,page:this.page})
					
					if(res.count > 0) {
						this.list = this.page == 1 ? res.list : [...this.list,...res.list];
						this.riqilist = this.page == 1 ? res.riqilist : [...this.riqilist,...res.riqilist];
					}
					this.total = res.count
					console.log(res,'返回信息');
					console.log(this.total,'本地');
					if(this.page == 1) uni.hideLoading()
					this.loading = false
				}catch{
					if(this.page == 1) uni.hideLoading()
					this.loading = false
				}
			},
			loadMore() {
				if(this.loading || this.page  * this.size >= this.total) return
				this.page ++ 
				this.getList()
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
		background-color: #fff;
	}

	.page {
		background-color: #fff;
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		height: 100vh;
	}
	.tab_row {
		padding: 40rpx 36rpx 24rpx;
		box-sizing: border-box;
	}

	// .list_info {
	// 	flex: 1;
	// 	display: flex;
	// 	flex-direction: column;
	// 	overflow: hidden;
	// }

	// .list_box {
	// 	height: 100%;
	// 	width: 100%;
	// }
	.tab_data_box{
		flex:1;
		.tab_data_row{
			flex: 1;
			display: flex;
			flex-direction: column;
		}
	}

	.list {
		padding: 0 36rpx 20rpx;
		width: 100%;
		box-sizing: border-box;
	}

	.info_row {
		margin-top: 34rpx;
		width: 100%;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0px 4rpx 12rpx 0px rgba(173, 173, 173, 0.37);
		background-color: #fff;
		padding: 22rpx 20rpx 22rpx;
		box-sizing: border-box;

		.shop {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.left {
				width: calc(100% - 7em);
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}

				text {
					width: calc(100% - 56rpx);
					font-size: 28rpx;
					line-height: 40rpx;
					color: #666666;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.right {
				text-align: right;
				width: 6em;
				color: #FF7A1F;
				font-size: 24rpx;
				line-height: 34rpx;
			}

			.text1 {
				color: #666666
			}
		}

		.commodity_box {
			display: flex;
			justify-content: space-between;

			>.left {
				image {
					width: 144rpx;
					height: 144rpx;
					border-radius: 14rpx;
				}
				
			}

			>.right {
				width: calc(100% - 162rpx);
				display: flex;
				justify-content: flex-start;
				flex-direction: column;
				font-size: 14px;
				.right1{
					
					.left{
						display: flex;
						flex-direction: row;
						align-items:center;
						.img{
							width: 22px;
							height: 22px;
							border-radius: 55px;
						}
						text{
							margin-left: 10px;
							font-size: 16px;
							font-weight: 600;
							flex: auto;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
						.biaoqian{
							flex: 0 0 30%;
							    background: #fea217;
							    color: #fff;
							    text-align: center;
							padding: 1px 6px;
							position: relative;
							right: -20rpx;
						}
					}
				}
				.right2{
					
				}
				.right3{
					
				}
				.right4{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 10px;
					width: 100%;
					color: #4c4c4c;
					.shijian{
						flex: 0 0 50%;
					}
					.chakan{
						flex: 0 0 50%;
						text-align: right;
					}
				}
				
				.right_right {
					width: 123rpx;
					text-align: right;

					.money {
						font-size: 28rpx;
						line-height: 40rpx;
						color: #26252A;
						font-weight: 700;
					}

					.num {
						font-size: 24rpx;
						line-height: 34rpx;
						color: #666666;
					}
				}

				.right_left {
					width: calc(100% - 138rpx);

					// display: flex;
					// height: 144rpx;
					// flex-direction: column;
					// justify-content: space-between;
					.name {
						font-size: 24rpx;
						line-height: 40rpx;
						color: #272727;
						height: 80rpx;
						overflow: hidden;
						text-overflow: ellispsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.label {
						margin-top: 16rpx;
						height: 48rpx;
						background: #f6f7fb;
						font-size: 20rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						color: #ADADAD;
						line-height: 48rpx;
						padding: 0 24rpx;
						max-width: 320rpx;
						box-sizing: border-box;
					}
				}
			}
		}

		.money_box {
			display: flex;
			justify-content: flex-end;
			font-size: 24rpx;
			line-height: 44rpx;
			color: #26252A;
			margin-top: 28rpx;

			.money {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
			}
		}

		.button_box {
			margin-top: 16rpx;
			text-align: right;

			.btn {
				display: inline-block;
				margin-left: 20rpx;

				&:first-child {
					margin-left: 0;
				}

				width: 162rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #ffffff;
				border: 2rpx solid #bbbbbb;
				border-radius: 32rpx;
				font-size: 24rpx;
				color:#666666;
			}

			.btn1 {
				border: 2rpx solid #ff9800;
				background: #ff9800;
				color: #fff
			}
		}
	}
	.pay_pop{
		border-radius: 30rpx 30rpx 0 0;
		width: 750rpx;
		background-color: #fff;
		height: 400rpx;
		display: flex;
		position: relative;
		.icon{
			position: absolute;
			right: 26rpx;
			top:26rpx;
		}
		.row{
			flex:1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			image{
				width: 74rpx;
				height: 74rpx;
				margin-bottom: 26rpx;
			}
			text{
				font-size: 28rpx;
				height: 44rpx;
				color:#26252A;
			}
		}
	}


	button[loading]::before {
		align-self: center
	}

	button {
		display: flex;
		justify-content: center;
		align-item: center;
		padding: 0;
	}

	button::after {
		border: none;
	}
	
	
	.riqi{
		margin-top: 20px;
	}
</style>
